import {useState, useEffect} from 'react'
import {useLocation, useNavigate} from 'react-router-dom'
import { Button, Tabs  } from 'react-vant'
import ProductSku from '../../../components/productSku/index.jsx'

import ProductCard from '../../../components/productCard/index.jsx'
import request from '../../../utils/request.jsx'

const Product= () => {
    const  navigate = useNavigate()
    const location = useLocation()
    let  {pathname} = location
    let path = pathname.split('/')[pathname.split('/').length -1]
    const [productData, setProductData] =useState([])
    const [active, setActive] = useState(0)
    const [flagSku, setFlagSku] = useState(false)
    const getDate = async() =>{
        let {data} = await request.get(`/productDetails?id=${path}`)
        setProductData(data)
    }
    useEffect(() => {
        getDate()
    },[path])

    const onShowClick = ref => {
        setFlagSku(!flagSku)
        ref&&ref.current&&ref.current.show()
    }
    return (
        <div>
            {
                productData&&productData.map(item => (
                    <div  key={item.id}>
                          <ProductCard items={item} />
                          <Tabs>
                            {item.comment&&item.comment.map((val,index) => (
                                    <Tabs.TabPane key={val.id} title={`${val.name}`} onChange={() => setActive(val.id)}>
                                        {val.desc}
                                    </Tabs.TabPane>
                                ))}
                          </Tabs>
                    </div>
                ))
            }
            <ProductSku onShow={onShowClick} skuDate={productData} id={path} flag={flagSku}/>
             <Button type='primary' block round onClick={() => onShowClick()}>立即购买</Button>
        </div>
    )
}

export default Product;